color-scheme
color-scheme CSS 属性允许元素指示它可以舒适地渲染的配色方案。用户代理会更改 UI 界面以下方面以匹配所使用的配色方案：
- 画布表面的颜色。
- 滚动条和其他交互 UI 的默认颜色。
- 表单控件的默认颜色。
- 其他浏览器提供的 UI 的默认颜色，例如“拼写检查”下划线。
组件作者必须使用 prefers-color-scheme 媒体功能来支持其余元素的配色方案。
操作系统配色方案的常见选择是“浅色”和“深色”，或“日间模式”和“夜间模式”。当用户选择这些配色方案中的一种时，操作系统会调整用户界面。这包括表单控件、滚动条以及CSS 系统颜色的使用值。
试一试
color-scheme: normal;
color-scheme: dark;
color-scheme: light;
<section class="default-example container" id="default-example">
<textarea id="example-element">Text Area</textarea>
</section>
#example-element {
width: 80%;
height: 50%;
}
语法
css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;
/* Global values */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;
color-scheme 属性的值必须是以下关键字之一。
值
正式定义
正式语法
color-scheme =
normal |
[ light | dark | <custom-ident> ]+ && only?
示例
声明配色方案偏好
要让整个页面采用用户的配色方案偏好，请在 :root 元素上声明 color-scheme。
css
:root {
color-scheme: light dark;
}
要让特定元素采用用户的配色方案偏好，请在这些元素上声明 color-scheme。
css
header {
color-scheme: only light;
}
main {
color-scheme: light dark;
}
footer {
color-scheme: only dark;
}
除了上述 CSS，还要在任何 CSS 样式信息之前，在 <head> 中包含 <meta name="color-scheme"> HTML <meta> 标签，以告知用户代理首选的配色方案，从而有助于防止页面加载时出现不必要的屏幕闪烁。
基于配色方案的样式
要根据配色方案偏好设置元素样式，请使用 prefers-color-scheme 媒体查询。下面的示例通过 color-scheme 属性使整个页面采用浅色和深色操作系统配色方案，然后使用 prefers-color-scheme 为这些配色方案中的单个元素指定所需的前景和背景颜色。
css
:root {
color-scheme: light dark;
}
@media (prefers-color-scheme: light) {
.element {
color: black;
background-color: white;
}
}
@media (prefers-color-scheme: dark) {
.element {
color: white;
background-color: black;
}
}
或者，使用 light-dark() <color> 函数，以更紧凑的代码结构为不同的配色方案设置前景和背景颜色。
css
:root {
color-scheme: light dark;
}
.element {
color: light-dark(black, white);
background-color: light-dark(white, black);
}
规范
| 规范 |
|---|
| CSS 颜色调整模块级别 1 # color-scheme-prop |
浏览器兼容性
加载中…
另见
prefers-color-scheme媒体查询用于检测用户对配色方案的偏好。light-dark()颜色函数用于设置浅色和深色配色方案的颜色。- 其他与颜色相关的属性：
color、accent-color、background-color、border-color、outline-color、text-decoration-color、text-emphasis-color、text-shadow、caret-color和column-rule-color background-imageprint-color-adjust- 使用相对颜色